<template>
	<view class="my-page">
		<view class="u-flex">
			<u-image :src="src == ''? 'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/my/avatar.png' : src"
				width="100rpx" height="100rpx" shape="circle"></u-image>
			<text style="flex: 1;" class="u-font-44 u-m-l-22 blod"
				v-if="token != ''">{{ nickname == '' ? randomString() : nickname }}</text>
			<text style="flex: 1;" class="u-font-44 u-m-l-22 blod" v-else @click='login'>登录</text>
		</view>
		<!-- 订单 -->
		<view class="my-card u-m-t-30">
			<view class="u-flex u-row-between">
				<text class="u-font-28">我的订单</text>
				<navigator url="" class="u-tips-color u-font-24">
					<text>全部订单</text>
					<u-icon name="arrow-right"></u-icon>
				</navigator>
			</view>
			<view class="u-flex u-row-around order u-m-t-40">
				<view class="item">
					<image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/my/order-1.png" mode="">
					</image>
					<text>待付款</text>
				</view>
				<view class="item">
					<image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/my/order-2.png" mode="">
					</image>
					<text>待发货</text>
					<u-badge :offset="[-10,0]" type="error" count="2"></u-badge>
				</view>
				<view class="item">
					<image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/my/order-3.png" mode="">
					</image>
					<text>待收货</text>
				</view>
				<view class="item">
					<image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/my/order-4.png" mode="">
					</image>
					<text>已完成</text>
				</view>
			</view>
		</view>
		<!-- 我的功能 -->
		<view class="my-card gongneng">
			<view class="u-font-28">我的功能</view>
			<navigator url="/pages/my/info" class="item u-flex">
				<image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/my/icon-1.png" mode=""></image>
				<view class="right u-flex-1 u-border-bottom u-flex u-row-between">
					<view>
						<view class="u-font-32">个人信息</view>
						<view class="u-font-24 u-tips-color">修改您的个人信息</view>
					</view>
					<u-icon class="u-content-color" name="arrow-right"></u-icon>
				</view>
			</navigator>
			<navigator url="/pages/my/setting" class="item u-flex">
				<image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/my/icon-2.png" mode=""></image>
				<view class="right u-flex-1 u-border-bottom u-flex u-row-between">
					<view>
						<view class="u-font-32">设置</view>
						<view class="u-font-24 u-tips-color">查看系统设置选项</view>
					</view>
					<u-icon class="u-content-color" name="arrow-right"></u-icon>
				</view>
			</navigator>
			<navigator url="/pages/my/privacy" class="item u-flex">
				<image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/my/icon-3.png" mode=""></image>
				<view class="right u-flex-1 u-border-bottom u-flex u-row-between">
					<view>
						<view class="u-font-32">隐私协议</view>
						<view class="u-font-24 u-tips-color">查看用户隐私协议</view>
					</view>
					<u-icon class="u-content-color" name="arrow-right"></u-icon>
				</view>
			</navigator>
			<navigator url="/pages/my/feedback" class="item u-flex">
				<image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/my/icon-4.png" mode=""></image>
				<view class="right u-flex-1 u-border-bottom u-flex u-row-between">
					<view>
						<view class="u-font-32">意见反馈</view>
						<view class="u-font-24 u-tips-color">将您的宝贵意见反馈给我们</view>
					</view>
					<u-icon class="u-content-color" name="arrow-right"></u-icon>
				</view>
			</navigator>
			<navigator url="/pages/my/comments" class="item u-flex">
				<image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/my/icon-5.png" mode=""></image>
				<view class="right u-flex-1 u-border-bottom u-flex u-row-between">
					<view>
						<view class="u-font-32">我的评论</view>
						<view class="u-font-24 u-tips-color">查看我的评论信息</view>
					</view>
					<u-icon class="u-content-color" name="arrow-right"></u-icon>
				</view>
			</navigator>
			<navigator url="/pages/my/likes" class="item u-flex">
				<image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/my/icon-6.png" mode=""></image>
				<view class="right u-flex-1 u-border-bottom u-flex u-row-between">
					<view>
						<view class="u-font-32">我的点赞</view>
						<view class="u-font-24 u-tips-color">查看我的点赞信息</view>
					</view>
					<u-icon class="u-content-color" name="arrow-right"></u-icon>
				</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				token: '',
				src: '',
				nickname: ''
			}
		},
		onLoad() {
			let that = this
			uni.getStorage({
				key: 'token',
				success: (res) => {
					that.token = res.data
				},
				fail: (err) => {
					console.log(err);
					uni.switchTab({
						url: '/pages/my/info'
					})
					uni.showToast({
						icon: null,
						title: '请先登录',
						duration: 2000
					})
				}
			})

			// 获取用户已有头像和昵称
			this.getUserInfo()
		},
		onPullDownRefresh(){
			uni.showLoading({
				title: '加载中...'
			});
			
			// 获取用户已有头像和昵称
			this.getUserInfo()
		},
		methods: {

			// 登录
			login() {
				uni.showLoading({
					title: '登录中...'
				});
				let that = this
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						console.log(loginRes,'0000');
						// 获取用户信息
						that.$http({
							url: that.api.user_login,
							method: 'post',
							data: {
								code: loginRes.code
							}
						}).then(res => {
							console.log(res);
							if (res.code == 1) {
								uni.hideLoading();
								that.token = res.data.token
								uni.setStorage({
									key: 'token',
									data: res.data.token
								});
							}
						})
					}
				});
			},

			// 获取用户已有头像和昵称
			getUserInfo() {
				const that = this
				that.$http({
					url: that.api.user_info,
					method: 'get',
				}).then(res => {
					// console.log(res,'获取用户信息');
					if (res.code == 1) {
						that.src = res.data.avatar;
						that.nickname = res.data.nickname;
						uni.hideLoading();
						uni.stopPullDownRefresh();
					}
				})
			},

			// 生成随机字符串
			randomString() {
				const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
				let result = '';
				for (let i = 0; i < 6; i++) {
					result += chars.charAt(Math.floor(Math.random() * chars.length));
				}
				return result;
			}
		}
	}
</script>

<style lang="scss">
	.my-page {

		.order {
			.item {
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				image {
					width: 48rpx;
					height: 48rpx;
				}

				text {
					margin-top: 16rpx;
				}
			}
		}

		.gongneng {
			.item {
				image {
					width: 54rpx;
					height: 54rpx;
					margin-right: 20rpx;
				}

				.right {
					padding: 40rpx 0;
				}
			}
		}

	}
</style>